<template>
    <ul>
        <li :class="{ active: item.isCompleted }" v-for="(item,  i) in data" :key="item.id">
            <input type="checkbox" :checked="item.isCompleted" @change="checkChange(item, $event)">
            <b>{{ item.todo }}</b>
            <button @click="handleDel(i)">删除</button>
        </li>
    </ul>

    <fieldset>
        <legend>详情</legend>
        <button @click="filter('all')">全部:{{ allCount }}</button>
        <button @click="filter('completed')">已完成:{{ completedCount }}</button>
        <button @click="filter('active')">未完成:{{ activeCount }}</button>
    </fieldset>
</template>
<script setup>
import { defineProps, toRefs, defineEmits, onRenderTracked, onRenderTriggered } from "vue"
//定义props接收data
let props = defineProps(['data', 'allCount', 'completedCount', 'activeCount'])

let { data, allCount, completedCount, activeCount } = toRefs(props)

//点击删除按钮的逻辑
let emits = defineEmits(['del', 'getFlag'])

let handleDel = (i) => {
    emits('del', i)
}

//勾选

let checkChange = (item, e) => {
    //拿到input:checkbox元素的勾选状态
    console.log(e.target.checked)
    item.isCompleted = e.target.checked
    console.log(data)
}

//声明一个筛选todo的方法

let filter = flag => {
    emits('getFlag', flag)
}
// throw new Error('todolist.vue抛出的异常')

//页面渲染的时候触发,页面加载就会触发
onRenderTracked((debuggerEvent) => {
    console.log('tracked===', debuggerEvent)
})

//虚拟dom发生变化的时候触发,页面加载的时候不触发
onRenderTriggered((debuggerEvent) => {
    console.log('triggerEvent===', debuggerEvent)
})

</script>

<style scoped>
.active {
    background-color: hotpink
}
</style>